<template>
    <div>
        <SuperTable ref="table" path="/common/banner/index" :params="params" :columns="columns">
            <Button slot="header-left" type="primary" @click="handleGoEdit()">新增轮播图</Button>
        </SuperTable>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import TableRows from '@/components/utils/table-rows.vue';
export default {
    components: {
        SuperTable,
        TableRows
    },
    data() {
        return {
            params: {
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '标题',
                    key: 'title'
                },
                {
                    title: '图片',
                    render: (h, params) => {
                        return h(TableRows, {
                            props: {
                                src: params.row.img || '/static/images/default_avatar.png'
                            }
                        })
                    }
                },
                {
                    title: '关联项目',
                    render: (h, params) => {
                        return h('span', params.row.project ? params.row.project.name : '');
                    }
                },
                {
                    title: '排序',
                    key: 'sort'
                },
                {
                    title: '状态',
                    key: 'status_text'
                },
                {
                    title: '创建时间',
                    key: 'created_at'
                },
                {
                    title: '更新时间',
                    key: 'updated_at'
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 120,
                    render: (h, params) => {
                        return h("div", [
                            h("Button", {
                                props: {
                                    type: "success",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.handleGoEdit(params.row.id);
                                    }
                                }
                            }, "编辑"),
                            h("Button", {
                                style: {
                                    marginLeft: "5px"
                                },
                                props: {
                                    type: "error",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.handleDelete(params.row);
                                    }
                                }
                            }, "删除")
                        ])
                    }
                }
            ]
        };
    },
    methods: {
        handleGoEdit(id) {
            this.$router.push({name: 'market_banner_edit', query: {id: id}});
        },
        handleDelete(row) {
            this.$Modal.confirm({
                title: "操作提示:",
                width: 320,
                content: `<p>您确定要删除轮播图‘${row.title}’吗?</p>`,
                onOk: () => {
                    const msg = this.$Message.loading({
                        content: '正在提交删除',
                        duration: 0
                    });
                    this.$ajax.delete('/common/banner/delete', {params: {ids: [row.id]}}).then(() => {
                        msg();
                        this.$Message.success('删除成功');
                        this.$refs.table.reload();
                    }).catch(err => {
                        msg();
                        this.$Message.error(err.message || '删除失败');
                    })
                }
            });
        }
    }
};
</script>